<template>
  <div class="teacher-classes-table">
    <el-table
      :data="classesData"
      border
      style="width: 100%"
      v-loading="isLoading"
      :empty-text="errorMsg || '暂无数据'"
    >
    <!-- <el-table-column prop="semesterId" label="学期" width="120"></el-table-column> -->
<el-table-column prop="class_name" label="班级名称" width="180"></el-table-column>
<!-- <el-table-column prop="classTime" label="上课时间" width="200"></el-table-column> -->
<el-table-column prop="location" label="上课地点" width="180"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="showStudents(scope.row)"
            :loading="scope.row.loading"
          >查看学生</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 学生详情对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="70%"
      top="5vh"
    >
      <el-table 
        :data="studentsData" 
        border
        style="width: 100%"
        height="60vh"
        v-loading="dialogLoading"
      >
        <el-table-column prop="student_id" label="学号" width="120" fixed></el-table-column>
        <el-table-column prop="student_name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80"></el-table-column>
        <el-table-column prop="college" label="学院" width="150"></el-table-column>
        <el-table-column prop="major" label="专业" width="180"></el-table-column>
        <el-table-column prop="grade" label="年级" width="80"></el-table-column>
        <!-- <el-table-column prop="political_status" label="政治面貌" width="100"></el-table-column> -->
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTeacherClasses, getClassStudents } from '@/api/teachingclass/teachingclass'

export default {
  name: 'TeacherClassesTable',
  data() {
    return {
      classesData: [],
      studentsData: [],
      currentClass: null,
      dialogVisible: false,
      isLoading: false,
      dialogLoading: false,
      errorMsg: ''
    }
  },
  computed: {
    dialogTitle() {
      return this.currentClass 
        ? `${this.currentClass.class_name} (${this.currentClass.semester_id}) - 学生列表` 
        : '学生列表'
    }
  },
  created() {
    this.fetchTeacherClasses()
  },
  methods: {
    async fetchTeacherClasses() {
  this.isLoading = true
  this.errorMsg = ''
  try {
    const res = await getTeacherClasses()
    console.log('API响应:', res) // 调试输出
    
    // 直接使用返回的数组，不需要res.data
    this.classesData = Array.isArray(res) 
      ? res.map(item => {
          // 新增调试输出，查看className的值
          console.log('处理后的数据:', item.className)
          
          return {
            class_id: item.classId,
            semester_id: item.semesterId,
            class_name: item.className,
            class_time: item.classTime,
            location: item.location,
            course_id: item.courseId,
            teacher_id: item.teacherId,
            loading: false
          }
        })
      : []
    
    if (this.classesData.length === 0) {
      this.errorMsg = '暂无班级数据'
    }
  } catch (error) {
    console.error('获取班级列表失败:', error)
    this.errorMsg = '加载班级数据失败，请稍后重试'
    this.$message.error('获取班级数据失败')
  } finally {
    this.isLoading = false
  }
},

    async showStudents(classInfo) {
      this.currentClass = classInfo
      this.dialogVisible = true
      this.dialogLoading = true
      
      try {
        const res = await getClassStudents(classInfo.class_id)
        console.log('学生数据响应:', res)  // 调试用
        
        // 处理不同的响应结构
        const rawData = res.data || res.result || res
        this.studentsData = Array.isArray(rawData)
          ? rawData.map(item => ({
              student_id: item.studentId || item.id,
              student_name: item.studentName || item.name,
              gender: item.gender || '未知',
              college: item.college || '',
              major: item.major || '',
              grade: item.grade || '',
              political_status: item.politicalStatus || '群众'
            }))
          : []
          
        if (this.studentsData.length === 0) {
          this.$message.warning('该班级暂无学生数据')
        }
      } catch (error) {
        console.error('获取学生列表失败:', error)
        this.$message.error(error.message || '获取学生数据失败')
        this.studentsData = []
      } finally {
        this.dialogLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-classes-table {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  .el-table {
    margin-top: 10px;
  }
  
  .dialog-footer {
    text-align: center;
  }
}

::v-deep .el-dialog__body {
  padding: 15px 20px;
}
</style>